//定义react 路由规则 步骤
// react 路由的核心思想: 一切皆组件

// 01: 需要下载对应的包 react-router-dom@5.3.3
// 02: 使用react-router-dom 首先需要设置你需要使用的路由模式 (HashRouter BrowserRouter) 
// import { HashRouter } from 'react-router-dom'

// 03:  配置路由规则: 
// 1: 从 react-router-dom 导入 Link 组件,该组件类似于 vue中的router-link
// 2: 从 react-router-dom 导入 Route 组件,该组件类似于 vue中的 router-view
// 注意: Route 组件有两个属性 path: 和 Link中的to属性一致, component: 对应要显示的组件


import React, { Component } from 'react';
import { Route, Redirect, Switch,withRouter } from 'react-router-dom';

import Home from '../views/router-views/Home';
import Category from '../views/router-views/Category';
import Car from '../views/router-views/Car';
import Mine from '../views/router-views/Mine';
import Notfind from '../views/router-views/Notfind';

// 路由组件的三种渲染方式
// 01: 第一种: component 组件的渲染方式
// 1: comoponet={组件名} 常用第一种
// 2. component={函数的形式,函数必须有返回值,返回一个组件}
// 注意: 第二种方式没有props属性, 通过给函数添加形参 props 然后在组件上展开该props,这样效果如上了


// 02: 第二种: render 组件的渲染方式
// render={(props)=><组件名 {...props}></组件名>}
// 注意:该方式 也没有props属性,实现props 属性的方式同上

// 03: 第三种: children 组件的渲染方式
// children={<组件名 {...this.props}></组件名>}
// 注意: 使用组件标签的方式也是没有props属性的, 前提保证当前组件有props
// children= {(props)=>{<组件名 {...props}/>}}



// 定义的路由规则组件
class Index extends Component {
    render() {

        console.log('Index',this);
        return (
            <>
                <Switch>
                    {/* <Route path='/home' component={Home}></Route> */}
                    <Route path='/home' component={(props)=>{return <Home {...props}></Home>}}></Route>
                    {/* <Route path='/category' component={Category}></Route> */}
                    <Route path='/category' render={(props)=><Category {...props}/>}></Route>
                    {/* <Route path='/car/:id?' component={Car}></Route> */}
                    {/* <Route path='/car/:id?' children={<Car {...this.props} />}></Route> */}
                     <Route path='/car/:id?' children={(props)=><Car {...props}/>}></Route>
                    <Route path='/mine' component={Mine}></Route>
                    {/* 
                    路由重定向,注意: from 属性 规定当访问什么路径我就重定向, to 属性: 定义重定向到哪个路径 exact 严格模式
                    注意: 一般重定向路由写在当前路由规则的最下方,通常需要设置exact 严格模式
                    */}
                    <Redirect from='/' to='/home' exact></Redirect>
                    {/* 404路由 : 当访问的path 地址不存在的时候,那么就显示404 页面,友好一些 */}
                    <Route component={Notfind}></Route>
                </Switch>
            </>
        );
    }
}

export default withRouter(Index);


